<template>
  <el-container>
    <el-row>
      <common-head child-name="编辑品类" father-name="系统管理"></common-head>
    </el-row>

    <el-main>

      <el-card class="box-card" shadow="hover" body-style="width: 250px">
        <div class="text item">
          <el-form v-model="singleCategory" class="demo-form-inline" style="text-align: left">
            <el-form-item style="font-size: medium; font-weight: bold" label="品类名称：">
              <el-select v-model="singleCategory.categoryName" size="small" placeholder="全部">
                <el-option label="大牌专区" value="大牌专区"></el-option>
                <el-option label="智能手环" value="智能手环"></el-option>
                <el-option label="智能秤" value="智能秤"></el-option>
                <el-option label="睡眠管理" value="睡眠管理"></el-option>
                <el-option label="营养健康" value="营养健康"></el-option>
                <el-option label="护理清洁" value="护理清洁"></el-option>
                <el-option label="智能手表" value="智能手表"></el-option>
                <el-option label="血压计" value="血压计"></el-option>
                <el-option label="运动户外" value="运动户外"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="品类顺序：">
              <el-input-number v-model="singleCategory.categoryOrder" size="small" controls-position="right" :min="1" :max="10"></el-input-number>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="子品类：">
              <el-input v-model="singleCategory.subcategory" placeholder="子品类"></el-input>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="品类描述：">
              <el-input v-model="singleCategory.categoryDescription" size="medium" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="editCategory">保存</el-button>
              <el-button type="primary" plain:true @click="cancel">取消</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

    </el-main>
  </el-container>
</template>

<script>
  import commonHead from "../../system/common/commonHead";

  export default {
        name: "editCategory",
        components: {commonHead},
        data(){
          return {
            singleCategory: {
              categoryName: '',
              categoryOrder: '',
              subcategory: '',
              categoryDescription: '',
            },
          }
        },

        mounted(){
          this.created();
        },

        methods: {
          created(){
            console.log(this.$route.query.categoryId);
            this.axios.get("micro-mall-server/category/getCategoryById/" + this.$route.query.categoryId).then(res => {
              this.singleCategory = res.data.data;
            });
          },

          //取消
          cancel(){
            console.log("cancel");
            //取消则直接回到品类管理页面
            this.$router.push({
              path: 'category_management'
            })
          },

          //提交已编辑品类信息
          editCategory(){
            console.log(this.singleCategory.categoryName);
            this.axios.post("micro-mall-server/category/editCategory", this.singleCategory).then(res => {
              console.log(res);
              if(res.data.code === 200){
                this.$message({
                  type: 'success',
                  message: '操作成功',
                });

                this.$router.push({
                  path: 'category_management'
                })
              }
            })
          }
        }
    }

</script>

<style scoped>
  .box-card{
    position: absolute;
    top: 40%;
  }
</style>
